import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    PanResponder,
} from 'react-native';

export default class PagePanResponser extends Component {

    _top;
    _left;

    constructor(props) {
        super(props);
        this.state = {
            top     : 0,
            left    : 0,
            bg      : 'white',
        };
    }

    componentWillMount(){

        /** 这玩意只是个点击配置 */
        this._panResponder = PanResponder.create({

            // 要求成为响应者(4个)
            onStartShouldSetPanResponder: (evt, gestureState) => true,          // 监听点击
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,           // 监听拖动
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            /**
             * 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
             * gestureState.{x,y}0 现在会被设置为0
             */
            onPanResponderGrant: (evt, gestureState)=>{
                // console.log(gestureState.x0 + ' ' + gestureState.y0);
                this._top   = this.state.top;
                this._left  = this.state.left;
                this.setState({bg: 'red'})
            },

            /**
             * 最近一次的移动距离为gestureState.move{X,Y}
             * 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
             */
            onPanResponderMove: (evt, gestureState)=>{
                // console.log(gestureState.dx + ' ' + gestureState.dy);
                this.setState({
                    top     : this._top  + gestureState.dy,
                    left    : this._left + gestureState.dx
                })
            },

            /**
             * 用户放开了所有的触摸点，且此时视图已经成为了响应者。
             * 一般来说这意味着一个手势操作已经成功完成。
             */
            onPanResponderRelease: (evt, gestureState)=>{
                this.setState({
                    bg      : 'white',
                    top     : this._top  + gestureState.dy,
                    left    : this._left + gestureState.dx
                })
            },


            onPanResponderTerminationRequest: (evt, gestureState) => true,

            /** 另一个组件已经成为了新的响应者，所以当前手势将被取消。 */
            onPanResponderTerminate: (evt, gestureState) => {

            },

            /** 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者(默认返回true。目前暂时只支持android。) */
            onShouldBlockNativeResponder: (evt, gestureState) => {
                return true;
            },
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <View
                    {...this._panResponder.panHandlers}
                    style={[
                        styles.rect,
                        {
                            backgroundColor: this.state.bg,
                            top: this.state.top,
                            left: this.state.left
                        }
                    ]}/>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button:{
        width:100,
        height:100,
        borderWidth:1,
        borderColor:'black',
        backgroundColor:'#223344',
    },
    rect: {
        width: 200,
        height: 200,
        borderWidth: 1,
        borderColor: 'black',
        position: 'absolute',
    }
});
